<template>
	<view class="box">
		<view class="top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<view class="toptitle" style="line-height: 88rpx">{{ text }}</view>
			<image class="back" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" @click="back" />
		</view>
		<view class="content">
			<view class="inputBox">
				<view class="clause">
					当前为账号注销页面，注销账号前，我们需要对您的信息进行审核，以保证您的账号安全，且审核时间段内，请保证您的账号状态如下:
					<br />·账号为正常状态 <br />·账号无任何纠纷，包含投诉举报
					<br />·账号处于安全状态，无被盗风险
				</view>
				<view class="b">友情提示：</view>
				<view class="clause">
					·账号注销后，您的账号下的全部权益将清除
					<br />·账号注销后，您的账号下的所有数据、记录等将无法访问和找回
					<br />·账号一旦注销完成，将无法恢复
					<br />·账号注销处理需要一定的周期，请您耐心等待。
				</view>
				<view style="margin-bottom: 30rpx">
					为确认注销操作为用户本人进行，请进行验证
				</view>
				<view class="login-box">
					<view class="input-box">
						<input v-model="phone" placeholder="请输入绑定的手机号" placeholder-class="input-placeholder" disabled />
					</view>
					<view class="input-box">
						<input v-model="Verifys" type="number" placeholder="请输入验证码" placeholder-class="input-placeholder" />
						<view class="getcode" @click="getcode">{{ content }}</view>
					</view>
				</view>
			</view>
			<view class="button" @click="show = true">注销</view>
		</view>
		<view class="motaikuang" v-show="show" @click="show = false">
			<view class="shangjia">
				<view class="li_1">是否确认注销账号？</view>
				<view class="li_2" @click="show = false">取消</view>
				<view class="li_3" @click="updetaUser">确定</view>
			</view>
		</view>
		<view class="motaikuang" v-show="show1" @click="show1 = false">
			<view class="verify" @click.stop="">
				<verify :show="show1" @Handle="Handle"></verify>
			</view>
		</view>
		<uniBall></uniBall>
		<uni-popup ref="binds22" type="center" :isMaskClick="true">
			<view class="uni-popup-wrapper" style="">
				<view class="uni-popup-title"> 温馨提示 </view>
				<view class="uni-popup-content">
					<mp-html :content="html"></mp-html>
					<!-- <view class="" style="white-space: nowrap;">
						同一车牌号6个月内可绑定<text class="uni-popup-mark">3</text>次二维码
					</view>
					<view class="">
						超出将无法绑定，请谨慎操作。
					</view>
					<view class="">
						本次为第<text class="uni-popup-mark">2</text>次绑定
					</view> -->
				</view>
				<button class="uni-popup-btn-one cu-btn" @click="confirm">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef H5
	import wxshare from "../utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	import Verify from "@/components/VueImageVerify.vue";
	export default {
		data() {
			return {
				imgUrl: this.$imgSrc,
				userInfo: uni.getStorageSync("Pduser"),
				phone: "",
				type: "",
				text: "账号注销",
				code: "",
				nikeName: "",
				content: "获取验证码",
				phone1: "",
				Verifys: "",
				show: false,
				show1: false,
				canClick: true,
				totalTime: 60,
				password: "",
				reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
				reg_tel1: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
				html: "",
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"]),
		},
		onLoad(options) {
			this.type = options.type;
			if (this.type == 1) {
				this.text = "昵称";
			} else if (this.type == 2) {
				this.text = "验证手机号";
			} else if (this.type == 3) {
				this.text = "设置密码";
			}
			this.phone = this.userInfo.phone;
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		components: {
			verify: Verify,
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			aaa() {},
			confirm() {
				this.$refs.binds22.close();
			},
			Handle(success) {
				if (!this.canClick) return; //改动的是这两行代码
				this.canClick = false;
				this.show1 = false;
				this.content = this.totalTime + "s后重新发送";
				this.$myRequest
					.get("/mob/login/phoneVerification.do", {
						phone: this.phone,
					})
					.then((res) => {
						uni.showToast({
							title: "发送验证码成功",
							icon: "none",
							mask: true,
						});
						this.code = res.CODE;
					});
				let clock = setInterval(() => {
					this.totalTime--;
					this.content = this.totalTime + "s后重新发送";
					if (this.totalTime < 0) {
						clearInterval(clock);
						this.content = "重新发送验证码";
						this.totalTime = 60;
						this.canClick = true; //这里重新开启
					}
				}, 1000);
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					},
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},
			nextStep() {
				if (this.Verifys != this.code) {
					uni.showToast({
						title: "验证码不正确，请重新填写",
						icon: "none",
						mask: true,
					});
					return;
				}
				this.totalTime = 0;
				this.content = "重新发送验证码";
				this.Verifys = "";
				this.code = "";
			},
			getcode() {
				if (this.canClick) {
					this.show1 = true;
				}
			},
			updetaUser() {
				let _this = this;
				if (!this.Verifys) {
					uni.showToast({
						title: "请填写验证码！",
						icon: "none",
						mask: true,
					});
					return;
				}
				if (this.Verifys != this.code) {
					uni.showToast({
						title: "验证码不正确，请重新填写",
						icon: "none",
						mask: true,
					});
					return;
				}
				// 判断经纪人是否离职
				if (_this.userInfo.isAgent == 1 && _this.userInfo.isShop == 0) {
					uni.showToast({
						title: "经纪人需先离职，再注销",
						icon: "none",
					});
					return;
				}
				let data = {
					id: _this.userInfo.id,
				};
				var status = true;
				if (status) {
					_this.$myRequest.post("/mob/user/cancellation", data).then(
						(res) => {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							uni.removeStorage({
								key: "Pduser",
							});
							const user = uni.getStorageSync("Pduser");
							uni.removeStorageSync(`${user.phone}publish`);
							uni.removeStorageSync("Pduser");
							uni.removeStorageSync("curriculumVitae");
							_this.$store.dispatch("user/logout", {});
							uni.switchTab({
								url: "/pages/my/index",
							});
						},
						(err) => {
							if (res.code == 400) {
								// '您当前车会员商家下还存在员工,不能注销账号!'
								// uni.showToast({
								// 	title: res.msg,
								// 	icon: "none"
								// });
								this.html = res.msg;
								this.$refs.binds22.open();
							}
						}
					);
				}
			},
		},
	};
</script>

<style scoped lang="less">
	.box {
		background: #fff;

		.back {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.b {
		font-weight: bold;
		font-size: 30rpx;
	}

	.content {
		/* #ifdef MP */
		height: calc(100vh - 192rpx);
		/* #endif */
		/* #ifdef APP-PLUS || H5 */
		height: calc(100vh - var(--status-bar-height) - 88rpx);

		/* #endif */
		.input {
			width: 690rpx;
			padding: 0 24rpx;
			margin: 0 auto;
			height: 90rpx;
			border: 1rpx solid #e0e0e0;
			font-size: 30rpx;

			input {
				width: 100%;
				height: 100%;
			}
		}
	}

	.inputBox {
		width: 630rpx;
		margin: 0 auto;
		padding-top: 30rpx;
	}

	.clause {
		font-size: 28rpx;
		white-space: pre-wrap;
		line-height: 50rpx;
		margin-bottom: 50rpx;
	}

	.button {
		width: 550rpx;
		height: 76rpx;
		margin: 0 auto;
		color: #fff;
		background: #64b6a8;
		border-radius: 10000rpx;
		font-size: 34rpx;
		line-height: 76rpx;
		text-align: center;
	}

	.userHeader {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.input-placeholder {
		color: #999999;
	}

	.login-box {
		.box-title {
			line-height: 75rpx;
			font-size: 46rpx;
			margin-bottom: 105rpx;
			color: #64b6a8;
			font-weight: 600;
		}

		.input-box {
			height: 65rpx;
			border-bottom: 1rpx solid #d0d0d0;
			position: relative;
			margin-bottom: 52rpx;

			input {
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #333;
				font-size: 28rpx;
			}

			.area {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 0;
			}

			.line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 60rpx;
				height: 30rpx;
				width: 2rpx;
				background: #333;
			}

			.getcode {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				color: #64b6a8;
				font-size: 28rpx;
				z-index: 10;
			}
		}

		.agreement {
			display: flex;
			padding-left: 10rpx;
			padding-top: 50rpx;
			font-size: 26rpx;
			align-items: center;

			.checkbox-group {
				width: 32rpx !important;
				height: 40rpx !important;
			}

			.text {
				display: flex;
				align-items: center;
				line-height: 37rpx;
				margin-left: 10rpx;
			}

			.tags {
				color: #64b6a8;
			}
		}

		.login {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			background: #64b6a8;
			color: #fff;
			border-radius: 100rpx;
			margin-top: 38rpx;
			margin-bottom: 24rpx;
		}

		.flex-end {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 26rpx;
				line-height: 37rpx;
				color: #666666;
			}
		}
	}

	.motaikuang {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 20;

		.verify {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.shangjia {
			position: absolute;
			width: 600rpx;
			height: 300rpx;
			background-color: #fff;
			border-radius: 10rpx;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);

			.li_1 {
				width: 100%;
				font-size: 34rpx;
				font-weight: 600;
				/* margin-left: 114rpx; */
				text-align: center;
				margin-top: 80rpx;
			}

			.li_2 {
				display: inline-block;
				vertical-align: top;
				width: 160rpx;
				height: 60rpx;
				background: #ffffff;
				border: 2rpx solid #64b6a8;
				border-radius: 37rpx;
				text-align: center;
				line-height: 60rpx;
				color: #64b6a8;
				margin-top: 58rpx;
				margin-left: 118rpx;
			}

			.li_3 {
				display: inline-block;
				vertical-align: top;
				width: 160rpx;
				height: 60rpx;
				background: #64b6a8;
				border-radius: 37rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				margin-top: 58rpx;
				margin-left: 46rpx;
			}
		}
	}

	.uni-popup-wrapper {
		width: 600rpx;
		background: #ffffff;
		border-radius: 10rpx;
		opacity: 1;
		padding: 0 32rpx;
		text-align: center;
		overflow: hidden;
	}

	.uni-popup-title {
		margin-top: 32rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 30rpx;
	}

	.uni-popup-content {
		padding: 30rpx 32rpx 40rpx 32rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}

	.uni-popup-btn-one {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #64b6a8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		font-size: 30rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 30rpx;
		margin-bottom: 32rpx;
	}
</style>